Day 26 GitHub Actions

自從筆者用過 CI/CD 自動化，體驗過自動化的方便性之後就回不去了，所以筆者最近新建立的專案都會撰寫這類的工具設定檔，把一些固定需要執行的指令自動化，增加開發者的體驗。

這個專案是在 GitHub 上，GitHub 對開源專案提供了免費的 GitHub Actions 服務，所以筆者當然是不客氣的直接使用它。

建議讀者可以搭配原始碼一起閱讀，原始碼網址為 https://github.com/taichunmin/chameleon-ultra.js/blob/master/.github/workflows/ci.yml

建立 GitHub Actions 設定檔

觸發條件

筆者幫這個設定檔指定了三個執行條件，分別是手動執行 workflow_dispatch、push 到 master 分支時執行、以及對 master 分支發起 pull_request 時執行。

on:
  workflow_dispatch:
  push:
    branches: [ master ]
  pull_request:
    branches: [ master ]

設定 Node.js 18 的執行環境

筆者使用 actions/setup-node@v3 這個 Action 來設定 Node.js 18 的執行環境，並且針對 yarn 這個套件管理工具進行快取。

- uses: actions/setup-node@v3
  with:
    node-version: 18
    cache: 'yarn'

執行指令

筆者在 test 及 deploy 這兩個 Job 中執行的指令不太相同，test Job 主要是執行測試，而 deploy Job 則是執行編譯並部署。

部署到 GitHub Pages

GitHub Pages 也是 GitHub 提供的免費服務，筆者會把這個專案主要分支中的文件、示範程式的網頁放到上面，讓開發者可以直接看到並使用。

- uses: actions/configure-pages@v3
- name: Upload artifact
  uses: actions/upload-pages-artifact@v1
  with:
    path: './dist'
- name: Deploy to GitHub Pages
  id: deployment
  uses: actions/deploy-pages@v2

上傳測試覆蓋率

筆者在這個專案使用 jest 產生測試覆蓋率的報告，然後透過 coverallsapp/github-action@master 來自動上傳到 Coveralls，讓我們可以在 README.md 上看到測試覆蓋率的 Badge，另外還可以打開連結查看測試覆蓋率的報告。

發佈至 npm

筆者也使用 GitHub Actions 來自動發佈至 npm，需要先去產生 NPM_TOKEN 放到專案的 Secrets 內。

- name: 發布至 npm
  uses: JS-DevTools/npm-publish@v1
  with:
    token: ${{ secrets.NPM_TOKEN }}

參考連結

• GitHub Actions Documentation